<template>
  <div>

    <v-md-editor ref="editor" v-model="editorText" height="800px" @change="changeContent" @save="saveContent"
      :disabled-menus="[]" @upload-image="handleUploadImage"></v-md-editor>
  </div>
</template>

<script setup type="ts">
  // import {
	// 	getUploadToken
	// } from '../serve/api/index.js'
// import * as qiniu from 'qiniu-js'
  import {ref,watch} from 'vue';
  //import axios from axios;
  import {  MessagePlugin } from 'tdesign-vue-next';
  import {upload} from '@/api/upload'
  const props=defineProps({
    text:{
      type:String,
      default:''
    }
  })

  const emits=defineEmits(['onSave','onChange'])

  const editorText=ref('')
  const domain=ref('')

   const changeContent=(txt, html)=> {
   				emits('onChange', {
   					text: txt,
   					html: html
   				})
   }
   		const 	saveContent=(txt, html)=> {
        console.log('saveContent')
   				emits('onSave',{text:txt,html:html})
   			}

   			const setContent=(txt)=> {
   				this.text = txt
   			}


   		const 	handleUploadImage=(event, insertImage, files)=> {
           console.log(files)
            upload(files)
                 .then(ret=>{
            			// 插入编辑器
                    ret.forEach(item=>{
                      insertImage({
                      	url: item.url,
                      	desc: '',
                      	// width: 'auto',
                      	// height: 'auto',
                      })
                    })
                 })
                 .catch(e=>{
                   if(e.message)
                   {
                     MessagePlugin.error(e.message)
                   }else

                   {
                     MessagePlugin.error(e.msg)
                   }
                 })
   		}

   			const  beforeAvatarUpload=(files)=> {
   				for(let i=0;i<files.length;i++)
   				{
   					let file=files[i]
   					const isJPG = file.type === 'image/jpeg'||file.type==='image/jpg'||file.type==='image/png';
   					const isLt2M = file.size / 1024 / 1024 < 2;

   					if (!isJPG) {
   						MessagePlugin.error('只能是图片格式!');
   						return
   					}
   					if (!isLt2M) {
   						MessagePlugin.error('图片大小不能超过 2MB!');
   						return
   					}
   				}
   			}
   			const error=(err)=> {
   				console.log('err=' + JSON.stringify(err));
   			}
   			const complete=(res)=> {
   				console.log('complete res=' + JSON.stringify(res))

   			}
   			const next=(response)=> {
   				console.log('response=' + JSON.stringify(response))
   				//response={"total":{"loaded":49942,"size":49942,"percent":100}} percent进度
   			}

 watch(
 ()=>props.text,
 ()=>{
    editorText.value=props.text
    //console.log('editor indexe ditorText.value',editorText.value)
 })
</script>

<style>
  #editor {
    margin: auto;
    width: 80%;
    height: 580px;
  }
</style>
